<template>
    <div>
        <!-- 订单抽屉 -->
        <div class="drawer">
            <!-- 订单详情 -->
            <el-drawer :visible.sync="detailData.isOpen_out_drawer" size="500px" :modal="false" :wrapperClosable="false"
                :close-on-press-escape="false">
                <div slot="title" class="drawer_order_title">
                    <div :class="{ 'selectTitle': select_detail == 0 }" @click=" select_detail = 0">订单详情</div>
                    <div :class="{ 'selectTitle': select_detail == 1 }" @click="get_operate_log">操作日志</div>
                </div>
                <div class="drawer_order_content detail_drawer" v-show="select_detail == 0">
                    <!-- 基础信息 -->
                    <div class="drawer_order_content_box detail_basic_Info">
                        <div>
                            <div>
                                <span>{{ order_detail_data.user.name ? order_detail_data.user.name : '客人姓名' }}</span>
                                <span>{{ order_detail_data.user.phone ? order_detail_data.user.phone : '客人电话' }}</span>
                            </div>
                            <span class="detail_basic_Info_status"
                                :style="{ backgroundColor: order_status == 6 ? '#FED4B3' : order_status == 7 ? '#C2EBFF' : order_status == 8 || order_status == 9 ? '#CCCCCC' : 'red', height: '48px' }">
                                {{ order_status == 6 ? '已预定' : order_status == 7 ? '进行中' : order_status == 8 ? '已完成' :
                                    order_status == 9 ? '已取消' : '待确认' }}
                            </span>
                        </div>
                        <div class="detail_basic_Info_channel">
                            <div class="detail_basic_Info_channel_name">{{
                                order_detail_data.channel ? order_detail_data.channel : '未知' }}</div>
                        </div>
                    </div>
                    <!-- 价格信息 -->
                    <div class="drawer_order_content_box detail_price_Info">
                        <Price :price="orderPrice"></Price>
                    </div>
                    <!-- 房间信息 -->
                    <div class="drawer_order_content_box detail_room_Info">
                        <div class="detail_room_Info_title">
                            <span>房间信息 : ￥ {{ order_detail_data.room_price }}</span>
                            <span>共 {{ order_detail_data.rooms.length }} 间房</span>
                        </div>
                        <div class="detail_room_Info_room">
                            <div class="detail_room_Info_room_item" v-for="(item, index) in order_detail_data.rooms"
                                :key="index">
                                <div class="detail_room_Info_room_item_conten">
                                    <div class="detail_room_Info_room_item_info">
                                        <div>{{ item.room_type }} - {{ item.room_num }}</div>
                                        <span>{{ item.date }}</span>
                                    </div>
                                    <div class="detail_room_Info_room_item_occupant" @click="occupant(item, index)">
                                        入住人<div class="num">{{ item.people_num }}</div>
                                    </div>
                                    <div class="detail_room_Info_room_item_price">
                                        ￥ {{ item.price }}
                                    </div>
                                    <div class="detail_room_Info_room_item_status">
                                        <span class="detail_basic_Info_status"
                                            :style="{ backgroundColor: item.status == '已预定' ? '#FED4B3' : item.status == '已入住' ? '#C2EBFF' : item.status == '已退房' ? '#CCCCCC' : item.status == '已取消' ? '#CCCCCC' : '#FED4B3', height: '48px', }">
                                            {{ item.status }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 其它消费 -->
                    <div class="drawer_order_content_box detail_consum_Info">
                        <div class="detail_consum_Info_title">
                            <span>其它消费 : ￥{{ order_detail_data.consume_price }}</span>
                            <span>
                                <el-button type="text" size="small" @click="moreOperate(8)">
                                    <i class="el-icon-plus"> 添加消费</i>
                                </el-button>
                            </span>
                        </div>
                        <div class="detail_consum_Info_table">
                            <el-table :data="order_detail_data.consume_list" style="width: 100%;font-size:12px"
                                :header-cell-style="{ background: '#ebeef5', lineHeight: '35px' }">
                                <el-table-column label="消费项目" width="70" align="center" prop="title" />
                                <el-table-column label="消费金额" width="80" align="center" prop="price" />
                                <el-table-column label="消费日期" width="90" align="center" prop="date" />
                                <el-table-column label="录入人" width="70" align="center" prop="admin" />
                                <el-table-column label="备注" align="center" prop="remarks" />
                                <el-table-column label="操作" width="50" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="text" style="color:red"
                                            @click="handleDelete(scope.row.id)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 收款金额 -->
                    <div class="drawer_order_content_box detail_consum_Info">
                        <div class="detail_consum_Info_title">
                            <span>收款金额 : ￥ {{ order_detail_data.pay_money }}</span>
                            <span>
                                <el-button type="text" size="small" @click="moreOperate(9)">
                                    <i class="el-icon-plus"> 添加收款</i>
                                </el-button>
                            </span>
                        </div>
                        <div class="detail_consum_Info_table">
                            <el-table :data="order_detail_data.pay_list" style="width: 100%;font-size:12px"
                                :header-cell-style="{ background: '#ebeef5', lineHeight: '35px' }">
                                <el-table-column label="项目" width="70" align="center" prop="title" />
                                <el-table-column label="支付方式" width="70" align="center" prop="payment" />
                                <el-table-column label="金额" width="80" align="center" prop="price" />
                                <el-table-column label="日期" width="90" align="center" prop="date" />
                                <el-table-column label="备注" align="center" prop="remarks" />
                                <el-table-column label="操作" width="50" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="text" style="color:red"
                                            @click="handleDelete(scope.row.id)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 订单提醒 -->
                    <div class="drawer_order_content_box detail_consum_Info">
                        <div class="detail_consum_Info_title">
                            <span>订单提醒 : {{ order_detail_data.reminder.length }}</span>
                            <span>
                                <el-button type="text" size="small">
                                    <i class="el-icon-plus" @click="addReminder()"> 添加提醒 </i>
                                </el-button>
                            </span>
                        </div>
                        <!-- 填写提醒信息 -->
                        <div>
                            <div class="drawer_order_content_row info_flex"
                                v-for=" (item, index) in order_detail_data.reminder" :key="index">
                                <!-- 提醒信息显示 -->
                                <div class="show_reminder_info">
                                    <div class="show_reminder_info_date">{{ item.date }}</div>
                                    <div class="show_reminder_info_conten">{{ item.content }}</div>
                                </div>
                                <!-- 编辑 -->
                                <div>
                                    <el-button @click="addReminder(item)" type="text" :disabled="item.is_remind == 1"
                                        size="mini"><i class="el-icon-edit"></i>
                                    </el-button>
                                </div>
                                <!-- 删除 -->
                                <div>
                                    <el-button @click="deleteReminder(item.id)" type="text" :disabled="item.is_remind == 1"
                                        size="mini" class="show_reminder_icon">
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 备注 -->
                    <div class="drawer_order_content_box detail_remarks_Info">
                        <div class="detail_remarks_Info_remarks">
                            备注 :
                            <div>{{ order_detail_data.remarks }}</div>
                        </div>
                        <div>
                            订单号:{{ order_detail_data.order_no }}
                            <div class="detail_remarks_Info_color">
                                <span></span>订单特殊颜色
                            </div>
                        </div>


                    </div>
                    <!-- 底部 -->
                    <div class="drawer_order_bottom">
                        <div class="drawer_order_bottom_price">
                            <el-popover class="row_input_nums" placement="top-start" title="" width="80" trigger="click">

                                <div style="" class="more_operate_title">
                                    <div @click="moreOperate(3)" v-if="order_status == 6">
                                        取消预订
                                    </div>
                                    <div @click="moreOperate(6)" v-else-if="order_status == 7">
                                        撤销入住
                                    </div>
                                    <div @click="moreOperate(7)" v-else-if="order_status == 8">
                                        撤销退房
                                    </div>
                                    <div v-else @click="moreOperate(10)">
                                        恢复预定
                                    </div>
                                </div>

                                <div slot="reference">
                                    <el-button plain size="small" class="addBtn">
                                        更多操作 <i class="el-icon-caret-bottom"></i>
                                    </el-button>
                                </div>
                            </el-popover>
                        </div>
                        <div class="drawer_order_bottom_btn">
                            <el-button type="primary" size="small" @click="modify_Order" v-if="order_status != 8">
                                修改订单
                            </el-button>
                            <el-button type="primary" size="small" v-if="order_status == 6" @click="moreOperate(4)">
                                办理入住
                            </el-button>
                            <el-button type="primary" size="small" v-if="order_status == 7" @click="moreOperate(5)">
                                办理退房
                            </el-button>
                        </div>
                    </div>
                </div>

                <!-- select_detail == 1时显示操作日志 -->
                <div v-show="select_detail == 1" class="drawer_order_content">
                    <div class="operate_log_list">
                        <el-timeline>
                            <el-timeline-item v-for="(item, index) in operate_log_data" :timestamp="item.timestamp"
                                :key="index" placement="top">
                                <el-card class="operate_log_list_card">
                                    <p>修改为</p>
                                    <div class="operate_log_list_card_frist">
                                        <span>渠道：{{ order_detail_data.channel }}</span>
                                        <span>预定人：{{ order_detail_data.user.name }}</span>
                                        <span>手机号：{{ order_detail_data.user.phone }}</span>
                                    </div>
                                    <div class="operate_log_list_card_second">
                                        <div> 房间： 简约双人床-209</div>
                                        <div> 入住时间： 2022-10-29 120：00.22，共三晚</div>
                                        <div> 房费： <span>￥ 909</span></div>
                                    </div>
                                    <div class="operate_log_list_card_third">
                                        <div> 备注：- </div>
                                        <div> 订单提醒：- </div>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </div>

                <!-- 内层嵌套的抽屉 -->
                <el-drawer destroyOnClose :append-to-body="true" class="inner_drawer" :visible.sync="innerDrawer"
                    size="500px" :modal-append-to-body="false" :close-on-click-modal="false">
                    <!-- 标题slot -->
                    <div slot="title" class="titleSlot">
                        <div class="titleIcon" @click="back">
                            <i class="el-icon-back"></i>返回
                        </div>
                        <span v-if="isShow_innerDrawer != 9">{{ innerDrawer_title }}</span>
                        <div class="drawer_Collection_title" v-if="isShow_innerDrawer == 9">
                            <span :class="{ 'selectTitle': cancellation_data.add_collection.is_refund == false }"
                                @click="submitForm('collectionForm', 'changecollectionForm')">收款</span>
                            <span :class="{ 'selectTitle': cancellation_data.add_collection.is_refund == true }"
                                @click="submitForm('collectionForm', 'changecollectionForm')">退款</span>
                        </div>
                    </div>
                    <!-- 分界线 -->
                    <div v-if="isShow_innerDrawer != 1" style=" border-top: 1px solid rgb(190, 189, 189);margin-top:15px">
                    </div>

                    <!-- 入住人-->
                    <div v-show="isShow_innerDrawer == 1">
                        <!-- 入住房间信息 -->
                        <div class="checkIn_room">
                            <div>
                                入住时间：<span>{{ selected_checkIn_person_data.date ?
                                    selected_checkIn_person_data.date.substring(5) : '--'
                                }}</span>
                            </div>
                            <div><span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.days : '--'
                            }}</span>晚</div>
                            <div>
                                <span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.room[0] : '--'
                                }}</span> /
                                <span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.room[1] : '--'
                                }}</span>
                            </div>
                            <div>￥<span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.price : '--'
                            }}</span></div>
                        </div>
                        <!-- 入住人信息 -->
                        <div class="checkIn_person">
                            <div class="checkIn_person_title">入住人姓名为必填项</div>
                            <!-- 填写入住人信息 -->
                            <div class="checkIn_person_info" v-for="( item, index ) in  checkIn_person_list " :key="item.id"
                                :style="{ borderColor: item.isTrue == false ? 'red' : 'transparent', }">
                                <div class="checkIn_person_info_input">
                                    <div><el-input v-model="item.name" placeholder="客人姓名" size="small"
                                            style="width: 75px; "></el-input>
                                    </div>
                                    <div><el-input v-model="item.phone" placeholder="手机号码" size="small"
                                            style="width: 101px;"></el-input>
                                    </div>
                                    <div>
                                        <el-select v-model="item.card_type" placeholder="请选择" style="width: 89px;">
                                            <el-option v-for=" items  in  id_type_options " :key="items.id"
                                                :label="items.label" :value="items.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div><el-input v-model="item.card_no" placeholder="证件号" size="small"
                                            style="width: 155px;"></el-input>
                                    </div>
                                </div>
                                <!-- 删除 -->
                                <div class="checkIn_person_info_delete" @click="deleteData(index, checkIn_person_list)">
                                    <i class="el-icon-delete"></i>
                                </div>
                            </div>

                            <!-- 添加入住人 -->
                            <div class="checkIn_person_info_add">
                                <el-button size="small" @click="addOccupant" plain class="addBtn">
                                    <i class="el-icon-plus"> 添加入住人</i>
                                </el-button>
                            </div>
                        </div>
                    </div>

                    <!-- 添加提醒 -->
                    <div v-show="isShow_innerDrawer == 2" class="remind_form">
                        <div class="remind_form_content">
                            <el-form label-position="left" ref="remindForm" :rules="remind_rules"
                                :model="selected_remind_data" label-width="80px">
                                <el-form-item label="活动名称" prop="reminder_time">
                                    <el-date-picker v-model="selected_remind_data.reminder_time"
                                        format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"
                                        value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="提醒内容" prop="content">
                                    <el-input type="textarea" v-model="selected_remind_data.content"
                                        :autosize='{ minRows: 5 }' placeholder="备注信息" maxlength="200" resize="none"
                                        show-word-limit></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <!-- 更多操作 -->
                    <!-- isShow_innerDrawer 1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款,10恢复预订-->
                    <div v-show="isShow_innerDrawer == 3 || isShow_innerDrawer == 4 || isShow_innerDrawer == 5 || isShow_innerDrawer == 6 || isShow_innerDrawer == 7 || isShow_innerDrawer == 10"
                        class="cancellation_roomlist">
                        <!-- 顶部提醒部分 6撤销入住 7撤销退房 10恢复预订-->
                        <div class="backCheckIn"
                            v-if="isShow_innerDrawer == 6 || isShow_innerDrawer == 7 || isShow_innerDrawer == 10"
                            :style="{ backgroundColor: isShow_innerDrawer == 6 ? '#FFDFC6' : isShow_innerDrawer == 7 ? '#E6ECFA' : isShow_innerDrawer == 10 ? '#CCCCCC' : '#FFDFC6' }">
                            {{ isShow_innerDrawer == 6 ? '撤销入住' : isShow_innerDrawer == 7 ? '撤销退房' : isShow_innerDrawer ==
                                10 ? '恢复预定' : '确认' }}后，
                            <span v-if="isShow_innerDrawer == 6 || isShow_innerDrawer == 7">
                                房间将回到{{ isShow_innerDrawer == 6 ? '已预定' : isShow_innerDrawer == 7 ? '已入住' : '确认'
                                }}状态，相关统计报表将被回滚
                            </span>
                            <span v-if="isShow_innerDrawer == 10">违约金将自动删除</span>
                        </div>

                        <div class="cancellation_roomlist_top">
                            <div>
                                <el-checkbox v-model="cancellation_data.isCheck_allRoom_book"
                                    @change="handleCheckAllChange_cancellation">全选</el-checkbox>
                            </div>
                            <div>
                                共 {{ cancellation_data.list ? cancellation_data.list.length : 0 }} 间
                                已选{{ cancellation_data ? cancellation_data.checked.length : 0 }}间
                            </div>
                        </div>
                        <div class="cancellation_roomlist_conten" v-if="cancellation_data.list">
                            <div class="cancellation_roomlist_conten_list" v-for="(item, index) in cancellation_data.list"
                                :key="index">
                                <div class="cancellation_roomlist_conten_list_left">
                                    <el-checkbox v-model="item.isCheck" @change="handleCheckChange_cancellation(index)">
                                        <span v-if="isShow_innerDrawer != 4">{{ item.room_msg }}</span>
                                        <!-- 办理入住可以选择房间 -->
                                        <el-cascader v-if="isShow_innerDrawer == 4" :options="roomOptionsCheckIn"
                                            v-model="item.room_num_id" filterable
                                            :props="{ emitPath: false, checkStrictly: false, }" show-all-levels size="mini"
                                            style="width:120px;">
                                        </el-cascader>
                                    </el-checkbox>
                                </div>
                                <div class="cancellation_roomlist_conten_list_right">
                                    <p>{{ item.date }} </p>
                                    <p :style="{ textDecoration: isShow_innerDrawer == 3 ? 'line-through' : 'none' }">房费：￥{{
                                        item.price }}
                                    </p>
                                    <div style="line-height:28px;"
                                        v-if="isShow_innerDrawer != 4 || isShow_innerDrawer == 5">
                                        <span>违约金</span>
                                        <el-input v-model="item.default_price" style="width:100px;margin-left:20px;"
                                            size="mini">
                                            <span slot="prefix" style="line-height:28px;">￥</span>
                                        </el-input>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="cancellation_roomlist_bottom">
                            <el-input type="textarea" resize="none" :autosize='{ minRows: 4 }'
                                :placeholder="cancellation_data.placeholder" v-model="cancellation_data.remarks"
                                maxlength="2048" show-word-limit>
                            </el-input>
                        </div>

                    </div>

                    <!-- 添加消费 -->
                    <div v-show="isShow_innerDrawer == 8" class="consum_form">
                        <div class="consum_form_content">
                            <el-form ref="consumForm" :rules="consum_rules" hide-required-asterisk
                                :model="cancellation_data.consum_form" label-width="80px">
                                <el-form-item label="*消费项目" prop="item">
                                    <div class="row_input_select">
                                        <el-select size="small" style="width: 100%;"
                                            v-model="cancellation_data.consum_form.item" placeholder="项目"
                                            @change="consum_info_Change(cancellation_data.consum_form, 'consum_form')">
                                            <el-option v-for="( items, consumindex ) in  consumeOptions "
                                                :key="`items.id+${items.id}+${consumindex}`" :label="items.name"
                                                :value="items.id" :disabled="!items.status">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item label="*数量" prop="num">
                                    <el-input v-model.number="cancellation_data.consum_form.num" placeholder="数量"
                                        size="small"
                                        @change="consum_info_Change(cancellation_data.consum_form, 'consum_form')"></el-input>
                                </el-form-item>
                                <el-form-item label="*金额" prop="price">
                                    <el-input v-model="cancellation_data.consum_form.price" placeholder="金额" size="small">
                                        <span slot="prefix" style="color: black;">￥</span>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="消费日期">
                                    <el-date-picker placeholder="选择日期" v-model="cancellation_data.consum_form.date"
                                        size="mini" style="width: 100%;" :default-value="cancellation_data.consum_form.date"
                                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" type=date>
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input type="textarea" v-model="cancellation_data.consum_form.remarks"
                                        :autosize='{ minRows: 5 }' placeholder="备注信息" maxlength="200" resize="none"
                                        show-word-limit></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <!-- 添加收款 add_collection -->
                    <div v-show="isShow_innerDrawer == 9" class="collection_form">
                        <Price :price="orderPrice"></Price>
                        <div class="collection_form_type_refund"
                            v-show="cancellation_data.add_collection.is_refund == true">
                            <div :class="{ 'selectRefund_type': cancellation_data.add_collection.refund_type == 0 }"
                                @click="cancellation_data.add_collection.refund_type = 0">线上原路退款</div>
                            <div :class="{ 'selectRefund_type': cancellation_data.add_collection.refund_type == 1 }"
                                @click="cancellation_data.add_collection.refund_type = 1">线下退款</div>
                        </div>
                        <div class="collection_form_content">
                            <el-form ref="collectionForm" hide-required-asterisk :rules="collection_rules"
                                :model="cancellation_data.add_collection" label-width="80px">
                                <el-form-item label="项目" prop="item">
                                    <div class="row_input_select">
                                        <el-select size="small" v-model="cancellation_data.add_collection.item"
                                            style="width: 200px;" placeholder="项目">
                                            <el-option
                                                v-for=" collect  in cancellation_data.add_collection.is_refund == false ? collectOptions : refundOptions"
                                                :key="collect.value" :label="collect.label"
                                                :value="collect.value"></el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item label="*支付方式" prop="pay_type">
                                    <div class="row_input_select">
                                        <el-select size="small" v-model="cancellation_data.add_collection.pay_type"
                                            style="width: 200px;" placeholder="支付方式">
                                            <el-option v-for="  payMethod  in  payMethodOptions " :key="payMethod.value"
                                                :label="payMethod.label" :value="payMethod.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item label="*金额" prop="price">
                                    <el-input v-model="cancellation_data.add_collection.price" placeholder="金额"
                                        style="width: 200px;" size="small">
                                        <span slot="prefix" style="color: black;">￥</span>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="日期">
                                    <el-date-picker placeholder="选择日期" v-model="cancellation_data.add_collection.date"
                                        size="mini" style="width: 200px;"
                                        :default-value="cancellation_data.add_collection.date" value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd" type=date>
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input type="textarea" v-model="cancellation_data.add_collection.remarks"
                                        :autosize='{ minRows: 5 }' placeholder="备注信息" maxlength="200" resize="none"
                                        show-word-limit></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>


                    <!-- 订单详情内层嵌套的抽屉底部 -->
                    <div class="inner_drawer_order_bottom">
                        <div class="drawer_order_bottom_price">
                            <div class="drawer_order_bottom_price_detail"
                                v-show="isShow_innerDrawer == 4 || isShow_innerDrawer == 5">
                                订单金额：<span style=" color: #0486FE;">￥{{ order_detail_data.order_money }}</span>
                                <p>
                                    已付: <span style="color: #E9AD55;">￥{{ order_detail_data.pay_money }}</span>
                                    还需收款 : <span style="color: #F56C6C;">￥{{ order_detail_data.no_pay_money }}</span>
                                </p>
                            </div>
                        </div>

                        <div class="inner_drawer_order_bottom_btn">
                            <el-button size="small" @click="cancell_innerDrawer">取消</el-button>
                            <!-- =确认添加入住人 -->
                            <el-button type="primary" size="small" v-show="isShow_innerDrawer == 1"
                                @click="subOccupant(order_detail_data.rooms, 'detail')">确认</el-button>
                            <!-- 提醒内容提交 -->
                            <el-button type="primary" size="small" v-show="isShow_innerDrawer == 2"
                                @click="submitForm('remindForm', 'detail')">确认</el-button>
                            <!-- 添加消费提交 -->
                            <el-button type="primary" size="small" v-show="isShow_innerDrawer == 8"
                                @click="submitForm('consumForm')">确认</el-button>
                            <!--添加收款提交 -->
                            <el-button type="primary" size="small" v-show="isShow_innerDrawer == 9"
                                @click="submitForm('collectionForm')">确认</el-button>
                            <el-button type="primary" size="small" v-show="isShow_innerDrawer == 4"
                                @click="more_operate_button('确认入住')">确认入住</el-button>
                            <el-button type="primary" size="small" v-show="isShow_innerDrawer == 5"
                                @click="more_operate_button('办理退房')">确认退房</el-button>

                            <!-- 更多操作部分的按钮(外层左下，撤销) -->
                            <el-button type="primary" size="small"
                                v-show="isShow_innerDrawer == 3 || isShow_innerDrawer == 6 || isShow_innerDrawer == 7 || isShow_innerDrawer == 10"
                                @click="more_operate_button('更多操作', isShow_innerDrawer)">确认</el-button>
                        </div>
                    </div>
                </el-drawer>

            </el-drawer>
        </div>
    </div>
</template>
<script>
import Price from '../../../components/myOrderDrawer/orderPrice/Price.vue'
import { cloneDeep } from 'lodash'

export default {
    props: {
        detailData: {
            type: Object,
            required: true,
        },
    },
    components: {
        Price
    },
    computed: {
    },
    watch: {
        detailData: {
            deep: true,
            handler(newValue) {
                console.log(this.name, 'this.name订单详情');
                this.name = newValue.name
                if (this.name == 'order') {
                    if (newValue.detail) {
                        this.order_detail_data = newValue.detail
                    }
                    this.order_status = newValue.order_status
                    if (newValue.order_id && this.order_id != newValue.order_id) {//父组件传值后获取订单详情数据
                        this.order_id = newValue.order_id
                        this.get_order_detail()
                    }
                } else if (this.name == 'today') {
                    if (newValue.detail) {
                        this.order_detail_data = newValue.detail
                        console.log('订单 详情组件接收到了修改了的订单详情数据');
                    }
                    this.getCheckInRoom(newValue.list)
                    this.order_id = newValue.order_id
                    this.order_status = newValue.order_status
                    this.get_order_detail()
                }else{

                }
            },
        },
    },
    data() {
        return {
            // detailData: {
            //     name: 'today',
            //     order_id: null,
            //     order_status: null,
            //     isOpen_out_drawer: false,
            //     list: null,
            //     detail: null,
            // },
            hotel_id: sessionStorage.getItem('hotel_id'),
            isShow_drawer_detail: this.detailData.isOpen_out_drawer,//订单详情外层
            innerDrawer: false,//更多操作内层
            innerDrawer_title: '入住人',
            isShow_innerDrawer: 1,//1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款,10恢复预定
            select_detail: 0,//0订单详情，1操作日志
            operate_log_data: [],//操作日志数组

            consumeOptions: [],//消费选项
            id_type_options: [
                {
                    id: 1,
                    label: '未知',
                    value: 99
                },
                {
                    id: 2,
                    label: '身份证',
                    value: 0
                }, {
                    id: 3,
                    label: '护照',
                    value: 1
                }, {
                    id: 4,
                    label: '港澳通行证',
                    value: 2
                }, {
                    id: 5,
                    label: '台湾通行证',
                    value: 3
                },
                {
                    id: 6,
                    label: '回乡证',
                    value: 4
                },
                {
                    id: 7,
                    label: '台胞证',
                    value: 5
                },
                {
                    id: 8,
                    label: '士兵证',
                    value: 6
                }, {
                    id: 9,
                    label: '军官证',
                    value: 7
                },
                {
                    id: 10,
                    label: '其他',
                    value: 99
                },
            ],//联系人证件类型
            // 3收款 4退款 5收押金 6退押金 
            collectOptions: [{
                value: 3,
                label: "收款"
            },
            {
                value: 5,
                label: "收押金"
            }],//收款渠道选择器
            refundOptions: [{
                value: 4,
                label: "退款"
            },
            {
                value: 6,
                label: "退押金"
            }],//退款渠道选择器  
            payMethodOptions: [
                {
                    label: '收款码',
                    value: 1,
                },
                {
                    label: '扫码付',
                    value: 2,
                },
                {
                    label: '飞猪代收',
                    value: 3,
                },
                {
                    label: '美团酒店代收',
                    value: 4,
                },
                {
                    label: '美团民俗代收',
                    value: 5,
                }, {
                    label: '现金',
                    valie: 6
                }],//收款方式选择器

            selected_checkIn_person_data: {},//当前显示的添加入住人数据
            selsect_item_index: null,//当前显示的添加入住人数据的下标
            selected_remind_data: {
                reminder_time: new Date(),
                content: '',
                id: null,
            },//当前显示的添加提醒数据

            // 更多操作使用的数据
            cancellation_data: {
                isCheck_allRoom_book: false,//是否全选房间
                checked: [],//选中的房间
                placeholder: '请填写取消预订备注',
                list: [],
                remarks: null,
                is_hour_room: 0,//0全日房，1钟点房

                consum_form: {//添加消费项目的信息
                    item: null,//消费项目
                    num: 1,
                    price: null,
                    date: this.formatDate(new Date()),
                    name: null
                },//添加消费表单的信息
                add_collection: {
                    is_refund: false,//是否退款
                    refund_type: 0,//退款方式 0线上，1线下
                    item: null,//项目
                    pay_type: null,//支付方式
                    price: null,//金额
                    date: this.formatDate(new Date()),//日期
                    remarks: null,//备注
                },
            },
            order_detail_data: {
                "order_no": "",
                "order_id": null,
                "is_hour_room": null,
                "channel": "",
                "user": {
                    "name": "",
                    "phone": ""
                },
                "rooms": [],
                "room_price": "",
                "order_money": "",
                "pay_money": "",
                "no_pay_money": "",
                "consume_price": null,
                "consume_list": [],
                "reminder": [],
                "pay_list": [],
                "remarks": ""
            },//当前订单详情信息数据
            roomOptions: [],//房间信息中房间选择器
            roomOptionsCheckIn: [],//办理入住中房间选择器


            /**
            * 内层抽屉数据
            */
            checkIn_person_list: [{
                name: null,
                phone: null,
                card_type: 0,
                card_no: null,
                isTrue: true,
            }],// 填写入住人的数据


            remind_rules: {
                reminder_time: [{ required: true, message: '请选择提醒时间', trigger: 'blur' }],
                content: [{ required: true, message: '请选择输入备注信息', trigger: 'blur' }],
            },//添加提醒入住的表单规则
            consum_rules: {
                item: [{ required: true, type: 'number', message: '请选择选择消费项目', trigger: 'blur' }],
                num: [{ required: true, type: 'number', message: '请填写数量', trigger: 'blur' }],
                price: [{ required: true, message: '请填写金额', trigger: 'blur' }],
            },//添加消费的表单规则
            collection_rules: {
                pay_type: [{ required: true, type: 'number', message: '请选择选择消费项目', trigger: 'blur' }],
                price: [{ required: true, message: '请填写金额', trigger: 'blur' }],
            },//添加收款表单规则


            /* +++++++++++++++需要父组件传递的数据+++++++++++++++++++++++++++++*/
            order_id: null,//当前详情订单id
            order_status: null,//当前详情订单status
            name: null,//用于判断是什么页面点击 calendar日历房态 today单日房态 order订单


            /* +++++++++++++++传递给组件price的值+++++++++++++++++++++++++++++*/
            orderPrice: {},

        }
    },
    created() {
        this.getAllRoom()
    },

    /**
     * 1.更多操作1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款,10恢复预定
     * 2 获取操作日志get_operate_log
     * 3 点击入住人occupant 添加入住人addOccupant 确认添加入住人subOccupant
     * 4 删除提醒 deleteReminder 添加/编辑提醒addReminder 确认添加编辑提醒submitForm
     * 5 
     * 6  删除消费项和收款项目  handleDelete 
     * 7 
     */
    methods: {
        // 获取订单详情
        get_order_detail() {
            let data = {
                order_id: this.order_id ? this.order_id : 253
            }
            console.log(data, '获取订单详情');
            this.my_request('supplier/hotel-pms-order/show', data, 'GET').then(res => {
                let { code, data } = res.data
                if (200 == code) {
                    this.order_detail_data = data
                    this.orderPrice = {
                        order_money: this.order_detail_data.order_money,
                        pay_money: this.order_detail_data.pay_money,
                        no_pay_money: this.order_detail_data.no_pay_money,
                    }
                    // console.log(data, '订单详情');
                }
            })
        },
        // 获取操作日志
        get_operate_log() {
            let data = {
                order_id: this.order_id
            }
            this.my_request('supplier/hotel-pms-order/log', data, "GET").then(res => {
                let { code, data } = res.data
                console.log(res, '获取操作日志');
                if (200 == code) {
                    data.forEach(item => {
                        item.timestamp = null
                        console.log(item);
                        item.timestamp = `${item.title}   ${item.create_time}   操作人：  ${item.admin.username}`
                    })
                    data.sort((a, b) => {
                        const dateA = new Date(a.create_time);
                        const dateB = new Date(b.create_time);
                        // 较新的日期排在前面
                        return dateB - dateA;
                    })
                    this.operate_log_data = data
                }
            })
            this.select_detail = 1
        },
        //获取消费项列表--填写订单内的消费信息
        getConsumeList() {
            this.consumeOptions = []
            let consume_data = {
                hotel_id: this.hotel_id
            }
            this.my_request('supplier/hotel-pms-consume', consume_data, 'GET').then(res => {
                let { code, data } = res.data
                if (200 == code) {
                    this.consumeOptions = data.list
                }
                // console.log(this.consumeOptions, '获取消费项目');
            })
        },

        // 获取所有房间
        getAllRoom() {
            let allRoom = {
                hotel_id: this.hotel_id,
            }
            this.my_request('supplier/hotel-pms', allRoom, 'GET').then(res => {
                let { code, data } = res.data
                if (200 == code) {
                    console.log(data, '获取所有房间');

                    this.roomOptions = cloneDeep(data)
                }
            })
        },
        getCheckInRoom(list) {
            this.roomOptionsCheckIn = list.map((item) => ({
                // console.log(item, 'rom');
                value: item.id,
                label: item.title,
                children: item.rooms.map((room => {
                    return ({
                        value: room.id,
                        label: room.room_num,
                        disabled: room.order_info.has_order
                    })
                }))

            }))
            console.log(this.roomOptionsCheckIn, 'this.roomOptionsCheckIn ');
        },
        /**
        * 点击修改订单
        * 转换数据到原有的表格数据中
        * 
        * 1 自定义事件到父组件。传递订单详情数据order_detail_data
        * 2 父组件关闭订单详情组件， 
        * 3 父组件将值传递给填写订单组件
        * 4 订单组件监听到值得变化之后，触发数据转换事件
        * 5 父组件打开填写订单组件
        *
        */
        modify_Order() {
            console.log('点击修改订单');
            if (this.name == 'order' || this.name == 'today') {
                this.$emit("open_fillOrder", this.order_detail_data)
            }
            //  else if (this.name == 'today') {
            //     console.log('today');
            // }
        },

        /**
        * 更多操作
        * ---取消预订
        * @param {num} num isShow_innerDrawer 内层嵌套抽屉显示的内容, 
        * @param {num} status 当前订单状态, 
        * value 1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款,10恢复预定
        * 
        * 点击更多操作之后，先获取可操作的房间数据，如果没有则提示
        * 有就进行下一步操作，打开抽屉
        * 
        * 不显示底部订单价格信息的有===办理入住， 撤销入住，撤销退房
        * 
        * 
        * 已完成（已退房）的订单只有撤销退房操作，其它按钮都没有
        * 已预订，进行中，已完成，(待确认，待付款)
        *
        */
        moreOperate(num) {
            // console.log(this.order_status, 'this.order_status更多操作');
            console.log(this.roomOptions, 'this.roomOptions');
            console.log(num, 'this.isShow_innerDrawer');
            this.isShow_innerDrawer = num
            if (num == 8 || num == 9) { //添加收款/消费等操作不需要判断有无可操作数据
                if (this.isShow_innerDrawer == 8) {
                    this.getConsumeList()
                    this.cancellation_data.consum_form = {
                        item: null,
                        num: 1,
                        price: null,
                        date: this.formatDate(new Date()),
                        name: null
                    }
                    this.innerDrawer_title = '添加消费'
                } else if (this.isShow_innerDrawer == 9) {
                    this.cancellation_data.add_collection = {
                        is_refund: false,//是否退款
                        refund_type: 0,//退款方式 0线上，1线下
                        item: null,//项目
                        pay_type: null,//支付方式
                        price: null,//金额
                        date: this.formatDate(new Date()),//日期
                        remarks: null,//备注
                    }
                    this.innerDrawer_title = '添加收款'
                }
            }
            else {
                let data_room = {
                    order_id: this.order_id,
                    status: this.order_status
                }
                this.my_request('supplier/hotel-pms-order/more', data_room, 'GET').then(res => {
                    let { code, data } = res.data
                    if (200 == code) {
                        if (data.length == 0) {
                            this.cancellation_data.list = []
                            this.innerDrawer = false
                            this.$message.warning('没有可操作的房间！');
                            return
                        } else {
                            if (this.isShow_innerDrawer == 3) {
                                this.innerDrawer_title = '取消预订'
                                this.cancellation_data.placeholder = '请填写取消预订备注'
                            } else if (this.isShow_innerDrawer == 4) {
                                this.innerDrawer_title = '办理入住'
                                this.cancellation_data.placeholder = '请填写办理入住备注'
                            } else if (this.isShow_innerDrawer == 5) {
                                this.innerDrawer_title = '办理退房'
                                this.cancellation_data.placeholder = '请填写办理退房备注'
                            } else if (this.isShow_innerDrawer == 6) {
                                this.innerDrawer_title = '撤销入住'
                                this.cancellation_data.placeholder = '请填写撤销入住备注'
                            } else if (this.isShow_innerDrawer == 7) {
                                this.innerDrawer_title = '撤销退房'
                                this.cancellation_data.placeholder = '请填写撤销退房备注'
                            } else if (this.isShow_innerDrawer == 10) {
                                this.innerDrawer_title = '恢复预定'
                                this.cancellation_data.placeholder = '请填写恢复预定备注'
                            }
                            // 多选操作
                            this.cancellation_data.list = data.map(item => {
                                item.isCheck = true
                                item.default_price = 0
                                return item
                            })
                            this.cancellation_data.isCheck_allRoom_book = true//默认全选
                            this.cancellation_data.checked = this.cancellation_data.list

                            console.log(this.cancellation_data, '可操作的数据');
                        }
                    } else {
                        this.$message.warning('没有可操作的房间！');
                    }
                })
            }
            this.innerDrawer = true
        },

        /**
        * 
        * isShow_innerDrawer 1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款,10恢复预订
        * 更多操作确认按钮
        *  @param {*} operate  
        *  @param {*} more_operate  更多操作按钮的传值
        * 
        */
        more_operate_button(operate, more_operate) {
            // 处理房间信息
            let rooms = []
            // console.log(this.cancellation_data.checked, '办理数据房间');

            // 处理请求数据
            this.cancellation_data.checked.forEach(element => {
                if ('确认入住' == operate || '办理退房' == operate) {
                    rooms.push({
                        id: element.id,
                        room_num_id: element.room_num_id,
                    })
                }
                else if ('更多操作' == operate) {
                    rooms.push({
                        id: element.id,
                        penalty_money: element.default_price,
                    })
                }
            })
            // 办理退房和办理入住部分
            if ('确认入住' == operate || '办理退房' == operate) {
                let url = ''
                if ('确认入住' == operate) {
                    url = 'supplier/hotel-pms/check-in'
                    // console.log('确认入住');
                } else if ('办理退房' == operate) {
                    url = 'supplier/hotel-pms/check-out'
                    // console.log('办理退房');
                }

                let check_in_data = {
                    order_id: this.order_id,
                    rooms,
                    remarks: this.cancellation_data.remarks
                }
                console.log(check_in_data, '办理数据data');

                this.my_request(url, check_in_data, "PUT").then(res => {
                    let { code, message } = res.data
                    // console.log(res, '操作结果');
                    if (200 == code) {
                        this.get_order_detail()//重新获取订单详情数据
                        this.change_tableStatus(operate)//修改表格数据中的房间状态
                        this.innerDrawer = false
                        this.$message.success(message)
                    } else {
                        this.$message.error('操作失败')
                    }

                })
            }
            // 操作（取消订单 撤销入住 撤销退房 恢复订单）
            else if ('更多操作' == operate) {
                let new_operate = null
                switch (more_operate) {
                    case 3:
                        new_operate = "取消预订";
                        break;
                    case 6:
                        new_operate = "撤销入住";
                        break;
                    case 7:
                        new_operate = "撤销退房";
                        break;
                    case 10:
                        new_operate = '恢复订单';
                        break;
                    default:
                        new_operate = '恢复订单';
                        break;
                }
                let more = {
                    order_id: this.order_id,
                    room_info: rooms,
                    remarks: this.cancellation_data.remarks
                }
                console.log(more, '更多操作数据');
                this.my_request('supplier/hotel-pms-order/handel', more, "PUT").then(res => {
                    let { code, message } = res.data
                    // console.log(res, '获取操作结果');
                    if (200 == code) {
                        this.get_order_detail()//重新获取订单详情数据
                        this.change_tableStatus(new_operate)//更新订单状态
                        this.innerDrawer = false
                        this.$message.success(message)
                    } else {
                        this.$message.error('操作失败')
                    }
                })
            }
        },

        /**
        * //更新订单状态
        * @param {*} operate 进行的操作，根据进行的操作来判断转什么状态(显示在表格中)
        * 取消预订==》0
        * 办理入住==》7 撤销入住==》6
        * 办理退房==》8 撤销退房==》7
        * 恢复订单0==》6
        * 
        * 通过当前选中操作的房间，在tableroom数据里面找到相对应的数据，改变状态//避免请求房间数据(数据多，响应慢)
        * 
        */
        change_tableStatus(operate) {
            // console.log(operate);
            let change_status = 0
            switch (operate) {
                case "取消预订":
                    change_status = 9;
                    break;
                case "确认入住":
                    change_status = 7;
                    break;
                case "撤销入住":
                    change_status = 6;
                    break;
                case "办理退房":
                    change_status = 8;
                    break;
                case "撤销退房":
                    change_status = 7;
                    break;
                case "恢复订单":
                    change_status = 6;
                    break;
                default:
                    change_status = 0;
                    break;
            }
            this.order_status = change_status//修改订单详情的状态
            // if (this.name == 'table') {
            //     this.change_tableStatus(new_operate)//修改表格数据中的房间状态
            // } else if (this.name == 'order') {
            //     // this.
            // }
            if (this.name == 'calendar') {
                // this.cancellation_data.checked.forEach(chesckRoom => {
                //     this.tableData.forEach(tableRoom => {
                //         if (tableRoom.room.id == chesckRoom.room_num_id) {//找到操作数据的房间id
                //             // console.log(tableRoom.room.id, tableRoom, '需要改变的房间');
                //             let date = chesckRoom.date.substring(0, 10)//改变状态的日期
                //             for (const key in tableRoom.room_dates) {
                //                 if (key == date) {
                //                     tableRoom.room_dates[key].room_info.status = change_status//修改状态
                //                 }
                //             }
                //         }
                //     })
                // })
            } else if (this.name == 'order') {

            } else if (this.name == 'today') {
                this.$emit('refreshRoom')
            }


        },

        /**
        * 入住人
        * @param {*} item 当前点击的入住人行--房间信息和入住人信息
        * 点击传递入住人信息，如果没有入住人则给入住人列表赋值为默认 this.checkIn_person_list
        */
        occupant(item, index) {
            this.selected_checkIn_person_data.date = item.date.split("至")[0]
            this.selected_checkIn_person_data.days = item.date.substring(item.date.indexOf("，") + 1, item.date.indexOf("晚"))
            this.selected_checkIn_person_data.price = item.price
            this.selected_checkIn_person_data.room = this.getHouseId(item.room_num_id, true)
            if (item.people.length > 0) {
                this.checkIn_person_list = item.people
            } else {
                this.checkIn_person_list = [
                    {
                        name: null,
                        phone: null,
                        card_type: 0,
                        card_no: null,
                        isTrue: true,
                    }
                ]
            }
            this.selsect_item_index = index//当前操作的入住人信息的下标
            this.innerDrawer_title = '入住人信息'
            this.isShow_innerDrawer = 1
            this.innerDrawer = true
        },
        /**
         *添加入住人
         */
        addOccupant() {
            this.checkIn_person_list.push({
                name: null,
                phone: null,
                card_no: null,
                card_type: 0,
                isTrue: true,//用于判断是否填写姓名，加边框
            })
        },
        /**
         * 确认添加入住人
         * @param {*} data 修改的入住人信息的房间数据
         * @param {*} name 操作的抽屉
         */
        subOccupant(data, name) {
            let hasEmptyName = false;//检查是否有未填写姓名的数据
            this.checkIn_person_list.forEach(person => {
                if (!person.name) {
                    person.isTrue = false
                    hasEmptyName = true;
                } else {
                    person.isTrue = true
                }
            })

            if (hasEmptyName) {
                this.$message.warning('请填写入住人姓名!');
                return
            }
            data[this.selsect_item_index].people = cloneDeep(this.checkIn_person_list)

            if ('detail' == name) {
                let add_data = {
                    order_room_id: data[this.selsect_item_index].id,
                    people: data[this.selsect_item_index].people
                }
                console.log(add_data, 'add_data');
                this.my_request('supplier/hotel-pms/people', add_data, "PUT").then(res => {
                    console.log(res, '确认添加入住人');
                    let { code } = res.data
                    if (200 == code) {
                        this.get_order_detail()
                        this.$message.success('成功添加入住人!');
                    } else {
                        this.$message.error('添加入住人失败!');
                    }
                })
            }

            this.innerDrawer = false
            this.checkIn_person_list = [{
                name: null,
                phone: null,
                card_type: 0,
                card_no: null,
                isTrue: true,
            }]
        },

        /**
         *内层取消按钮
         */
        cancell_innerDrawer() {
            this.checkIn_person_list = [{
                name: null,
                phone: null,
                card_type: 0,
                card_no: null
            }]
            this.innerDrawer = false
        },

        /**
        * 删除方法
        * @param {*} index 删除的数据下标
        * @param {*} data 删除的数据所在数组
        */
        deleteData(index, data) {
            data = data.splice(index, 1)
        },

        /**
         * 删除消费项和收款项目
         * @param {*} name consum消费项目。pay收款项目
         */
        handleDelete(rowId) {
            let data = {
                id: rowId
            }
            this.my_request('supplier/hotel-pms', data, 'DELETE').then(res => {
                console.log(res, '删除消费项目')
                let { code, message } = res.data
                if (200 == code) {
                    this.$message.success(message)
                    if (this.name == "today") {
                        this.$emit('refreshRoom')
                    }
                    this.get_order_detail()
                } else {
                    this.$message.error('删除失败')
                }
            })
        },
        /**
        * 删除提醒
        * @param {*} id 删除的提醒id
        */
        deleteReminder(id) {
            console.log(id, '删除提醒');
            let data = {
                id,
            }
            console.log(id);
            this.my_request('supplier/hotel-pms-reminder', data, 'DELETE').then(res => {
                console.log(res, 'del');
                if (200 == res.data.code) {
                    this.get_order_detail()
                    this.innerDrawer = false
                    this.$message.success('删除成功');
                }
            })
        },
        /**
        * 添加/编辑提醒
        * @param {obj} item 获取到的当前的提醒信息 有item代表是t修改，没有则是添加
        */
        addReminder(item) {
            // console.log(operate, '添加/编辑提醒');
            if (item) {
                this.innerDrawer_title = '修改提醒'
                this.selected_remind_data.reminder_time = item.reminder_time ? item.reminder_time : item.date
                this.selected_remind_data.content = item.content
                this.selected_remind_data.id = item.id//编辑则添加id
            } else {
                this.innerDrawer_title = '添加提醒'
                this.selected_remind_data.reminder_time = this.formatDate(new Date(), 1)
                this.selected_remind_data.content = null
                this.selected_remind_data.id = null//添加没有id
            }
            this.isShow_innerDrawer = 2
            this.innerDrawer = true
        },
        /**
         * 内层添加提醒/消费、收款表单----确认添加提醒
         * @param {*} formName 表单名称
         * @param {*} operate 操作
         */
        submitForm(formName, operate) {
            // 切换退款或收款时，重置表单验证
            if (formName == 'collectionForm' && operate == 'changecollectionForm') {
                this.$refs[formName].resetFields();
                this.cancellation_data.add_collection.is_refund = !this.cancellation_data.add_collection.is_refund
                return
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {//表单信息正确时，则 添加到/编辑 数组，并且返回上一级抽屉

                    // 内层添加消费
                    if ('consumForm' == formName) {
                        console.log(valid, this.cancellation_data.consum_form, 'consumForm');
                        let consumeData = {
                            order_id: this.order_id,
                            name: this.cancellation_data.consum_form.name,
                            num: this.cancellation_data.consum_form.num,
                            money: this.cancellation_data.consum_form.price,
                            remarks: this.cancellation_data.consum_form.remarks
                        }
                        this.my_request('supplier/hotel-pms/consume', consumeData, "POST").then(res => {
                            let { code, message } = res.data
                            if (200 == code) {
                                if (this.name == "today") {
                                    this.$emit('refreshRoom')
                                }
                                this.get_order_detail()//重新获取订单详情
                                this.$message.success(message)
                                this.innerDrawer = false
                            } else {
                                this.$message.error('添加失败')
                            }
                        })
                        return
                    }

                    // 内层添加收款
                    if ('collectionForm' == formName) {
                        let collectionData = {
                            order_id: this.order_id,
                            type: this.cancellation_data.add_collection.item,
                            pay_type: this.cancellation_data.add_collection.pay_type,
                            date: this.cancellation_data.add_collection.date,
                            money: this.cancellation_data.add_collection.price,
                            remarks: this.cancellation_data.add_collection.remarks
                        }
                        // console.log(collectionData, 'collectionData');
                        this.my_request('supplier/hotel-pms/cash', collectionData, "POST").then(res => {
                            console.log(res, '内层添加收款');
                            let { code, message } = res.data
                            if (200 == code) {
                                if (this.name == "today") {
                                    this.$emit('refreshRoom')
                                }
                                this.get_order_detail()//重新获取订单详情
                                this.innerDrawer = false
                                if (collectionData == 3 || collectionData == 5) {
                                    this.$message.success(message)
                                } else {
                                    this.$message.success('添加退款成功')
                                }

                            } else {
                                this.$message.error('添加失败')
                            }
                        })
                        return
                    }

                    // 添加/编辑 提醒 
                    if ('detail' == operate) {
                        if (this.selected_remind_data.id) {
                            // console.log('有id是编辑,订单详情');
                            let data = {
                                id: this.selected_remind_data.id,
                                reminder_time: this.selected_remind_data.reminder_time,
                                content: this.selected_remind_data.content,
                            }
                            this.my_request('supplier/hotel-pms-reminder', data, 'PUT').then(res => {
                                let { code } = res.data
                                if (200 == code) {
                                    this.get_order_detail()
                                    this.innerDrawer = false
                                    this.$message.success('修改成功');
                                }
                            })
                        } else {
                            // console.log('无id是添加,订单详情');
                            let data = {
                                order_id: this.order_id,
                                reminder_time: this.selected_remind_data.reminder_time,
                                content: this.selected_remind_data.content,
                                hotel_id: this.hotel_id,
                            }
                            this.my_request('supplier/hotel-pms/reminder', data, 'POST').then(res => {
                                let { code, message } = res.data
                                if (200 == code) {
                                    this.get_order_detail()
                                    this.innerDrawer = false
                                    this.$message.success(message);
                                }
                            })
                        }
                    }
                } else {
                    // this.$message.error('请填写完整信息')
                    return false;
                }
            });
        },
        /**
         * 消费项目发生变化的数据改变价格
         * @param {*} consum 当前选中消费项目发生变化的数据
         */
        consum_info_Change(consum) {
            this.consumeOptions.forEach(item => {
                consum.price = (parseFloat(item.price) * consum.num).toFixed(2)
                consum.name = item.name
            })
        },


        // 更多操作里的全选
        handleCheckAllChange_cancellation(val) {
            this.cancellation_data.checked = val ? this.cancellation_data.list : []
            this.cancellation_data.list.forEach(element => {
                element.isCheck = val ? true : false
            });
        },
        // 更多操作里的多选按钮
        handleCheckChange_cancellation() {
            let isAll = true
            this.cancellation_data.list.forEach(element => {
                if (element.isCheck == false) {
                    isAll = false
                }
            });
            this.cancellation_data.isCheck_allRoom_book = isAll

            this.cancellation_data.checked = this.cancellation_data.list.filter(item => {
                return item.isCheck
            })
            // console.log(this.cancellation_data.checked, '更多操作数据');
        },

        /**
        * back 返回
        */
        back() {
            console.log("点击了返回");
            if (this.fill_order_title_show == 2 || this.innerDrawer == false || this.isShow_drawer == true) {
                this.isShow_drawer = false
                return
            }
            this.innerDrawer = false

        },



        /**
        * 根据房间id获取房型id
        * @param {*} id 房间id
        * @param {*} bool true--获取房间和房型名
        */
        getHouseId(selectId, bool) {
            let house_id = null
            let house_name = []
            this.roomOptions.forEach(item => {
                item.rooms.forEach(items => {
                    if (items.id == selectId) {
                        house_id = item.id
                        house_name[0] = items.room_num
                        house_name[1] = item.title
                    }
                })
            })
            if (bool) {
                return house_name
            } else {
                return house_id
            }
        },
        /**
        * 转换成字符串格式
        * @param {*} date 
        * @param {*} key true返回MM-dd
        */
        formatDate(date, key) {
            let year = date.getFullYear();
            let month = String(date.getMonth() + 1).padStart(2, '0');
            let day = String(date.getDate()).padStart(2, '0');
            let hours = String(date.getHours()).padStart(2, '0');
            let minutes = String(date.getMinutes()).padStart(2, '0');
            let seconds = String(date.getSeconds()).padStart(2, '0');

            if (key == 1) {
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            } else if (key == 2) {
                return `${month}-${day} ${hours}:${minutes}`;
            } else {
                return `${year}-${month}-${day}`;
            }
        },
    }
}

</script>

<style lang="scss" scoped src="../order.scss"></style>
